<template>


<div>
  <div class="con" style="margin:0 auto;text-align:center;width:30%;margin-top: 10%">
    <p style="font-weight:bold">找回密码</p>

        <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
          <el-form-item label="账户" required prop="account">
            <el-input v-model="ruleForm.account" ></el-input>
          </el-form-item>
          <el-form-item label="邮箱" required prop="email">
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>

          <div style="float: right">
            <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </div>
        </el-form>


  </div>
</div>

</template>

<script>
export default {
  name: "getEmail",
  data(){
    return{
      ruleForm:{
        email:'',
        account:''
      },
      rules:{},
    }
  },
  methods:{
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          const {data: res} = await this.$http.get("isExist", {
            params: {
              account: this.ruleForm.account
              , email: this.ruleForm.email
            }
          })
          if(res=='success'){
            return this.$message.success("已发送邮件至用户邮箱，请前往查收修改！！")
          }
          return this.$message.error(res)


        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }

}
</script>

<style scoped>
.con{
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
  overflow: hidden;
}


</style>